<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>智能行程规划</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="{{ url_for('static', filename='css/apple-style.css') }}" rel="stylesheet">
    </style>
    <style>
        @supports (backdrop-filter: blur(20px)) {
            .glassmorphism {
                background: rgba(255,255,255,0.7);
                backdrop-filter: saturate(180%) blur(20px);
            }
        }

        .plan-container {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        #map-container {
            flex: 2;
            height: 70vh;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .recommendation-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
        }

        .recommendation-card:hover {
            transform: translateY(-4px);
        }

        .info-panel {
            flex: 1;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 12px;
        }
        .budget-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        @media (max-width: 768px) {
            .plan-container {
                flex-direction: column;
            }
            #map-container {
                height: 50vh;
            }
        }

        /* 新增标题样式 */
        .container h1 {
            text-align: center;
            padding: 1.5rem;
            background-image: url("/static/images/1dde71b63ba60784db8707eaa21593a5.jpg");
            background-size: cover;
            background-position: center;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            border-radius: 12px;
            margin-bottom: 2rem;
        }

        /* 增强地图动画 */
        #map-container {
            animation: animate__fadeInLeft 1s both;
            animation-delay: 0.3s;
        }

        /* 优化信息面板动效 */
        .info-panel {
            animation: animate__fadeInRight 0.8s cubic-bezier(0.4,0,0.2,1) both;
            transition: transform 0.3s, opacity 0.3s;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .container {
                padding: 0 1rem;
            }
            #map-container {
                height: 55vh;
                margin-bottom: 1.5rem;
            }
            .budget-card {
                padding: 1rem;
                font-size: 0.9em;
            }
        }

        /* 触控反馈 */
        .recommendation-card:active {
            transform: scale(0.98);
            transition: transform 0.1s;
        }
    </style>
    <style>
        @keyframes animate__fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes animate__fadeInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>智能行程规划</h1>
        <div class="plan-container">
            <div id="map-container"></div>
            <div class="info-panel glassmorphism animate__animated animate__fadeInRight">
                <div class="budget-card">
                    <h3>预算概览</h3>
                    <p>交通费用：￥<span id="transport-cost">0</span></p>
                    <p>餐饮预算：￥<span id="food-cost">0</span></p>
                    <p>总预算：￥<span id="total-cost">0</span></p>
                </div>
                <div class="attraction-list">
    {% for attraction in attractions %}
    <div class="attraction-card">
        <h3 class="bilingual">{{ attraction.name_zh }} <span class="en-text">{{ attraction.name_en }}</span></h3>
        <p class="feature-desc">{{ attraction.description }}</p>
        <div class="tags">
            {% for tag in attraction.tags %}
            <span class="tag">{{ tag }}</span>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
            </div>
        </div>
    </div>

    <script src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=47jXQbiwPNWVY5GgVPUJYpOiHG5YhBcr" type="text/javascript"></script>
    <script>
        // 初始化地图和路线规划逻辑（参考navigation.html）
        // 初始化地图
        const map = new BMapGL.Map('map-container');
        map.centerAndZoom(new BMapGL.Point(110.3434, 20.0456), 12);
        
        // 添加景点标记
        const attractions = {{ attractions|map(attribute='to_dict')|list|tojson|safe }};
        attractions.forEach(attraction => {
          const point = new BMapGL.Point(attraction.longitude, attraction.latitude);
          const marker = new BMapGL.Marker(point);
          
          marker.addEventListener('click', function() {
            fetch(`/get_feature?id=${attraction.id}`)
              .then(response => response.json())
              .then(data => {
                new BMapGL.InfoWindow(data.tssm, {width: 250}).open(map, point);
              });
          });
          
          map.addOverlay(marker);
        });
        
        // 绘制连接线
        const points = attractions.map(a => new BMapGL.Point(a.longitude, a.latitude));
        new BMapGL.Polyline(points, {
          strokeColor: "#3388FF",
          strokeWeight: 4,
          strokeOpacity: 0.8
        }).addTo(map);
        // 预算计算逻辑
        function updateBudget(transport, food) {
            document.getElementById('transport-cost').textContent = transport;
            document.getElementById('food-cost').textContent = food;
            document.getElementById('total-cost').textContent = parseInt(transport) + parseInt(food);
        }
    </script>
    <script src="{{ url_for('static', filename='js/apple-interactions.js') }}"></script>
</body>
</html>